<template>
  <div id="main4" style="width: 100%; height: 100%;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'Echart4',
    mounted() {
      // this.getSystemInfo();
    },
    methods: {
      getSystemInfo() {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-type`,
        }).then((res) => {
          if (res.data.code == 0) {
            const array = []
            res.data.data.forEach((item) => {
              array.push({ value: item.num, name: item.algorithm })
            })
            that.initChart(array);
          }
        }).catch((error) => {
        });
      },
      initChart(data) {
        const chartDom = document.getElementById('main4');
        const myChart = echarts.init(chartDom);

        const option = {

          tooltip: {
            trigger: 'item'
          },
          color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      }
    }
  }
</script>
